<template>
	<view class="container">
		<!--轮播图.开始-->
		<view class="goods-head">
			<swiper class="swiper-box">
				<swiper-item>
					<view class="swiper-item">
						<image mode="widthFix" :src="$api.loadFile(model.goodsProduct.imgUrl?model.goodsProduct.imgUrl:model.goodsProduct.shopGoods.imgUrl)"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--轮播图.结束-->
		
		<!--标题.开始-->
		<view class="group-box">
			<view class="goods-title">
				<text class="title">{{model.goodsProduct.shopGoods.title}}</text>
				<text class="subtitle">{{model.title}}</text>
				<view class="point">
					<text class="text">兑换所需积分</text>
					<text class="sale">{{model.point}}</text>
					<text class="original">{{model.goodsProduct.sellPrice}}</text>
				</view>
				<view class="info">
					<text>销量：{{model.goodsProduct.shopGoods.saleCount}}</text>
					<text>库存：{{model.goodsProduct.stockQuantity}}</text>
					<text>浏览量：{{model.goodsProduct.shopGoods.click}}</text>
				</view>
			</view>
		</view>
		<!--标题.结束-->
		
		<!--选项.开始-->
		<view class="group-box">
			<view class="item-list">
				<view class="list-box">
					<text class="title">规格</text>
					<text class="remark">{{model.goodsProduct.skuText}}</text>
				</view>
			</view>
		</view>
		<!--选项.结束-->
		
		<!--评价.开始-->
		<view class="group-box">
			<view class="ntitle">
				<view class="left">
					<text class="h3">评价({{model.goodsProduct.shopGoods.evaluateCount}})</text>
				</view>
				<view class="right">
					<navigator :url="'../evaluate/list?id='+model.goodsProduct.shopGoods.id" class="more">查看全部</navigator>
				</view>
			</view>
			<view class="comment-list">
				<view v-if="evaluateList.length===0" class="nodata">
					商品暂无评价
				</view>
				<!--循环.开始-->
				<view v-for="(item,index) in evaluateList" :key="index" class="list-box">
					<view class="head-box">
						<view class="left">
							<view class="img-box">
								<image mode="widthFix" :src="$api.loadFile(item.member.avatar)"></image>
							</view>
							<view class="meta">
								<text>{{item.userName}}</text>
								<text class="time">{{item.addTime}}</text>
							</view>
						</view>
						<view class="star">
							<text v-for="i in 5" :key="i" class="iconfont" :class="i<=item.serviceScore?'icon-star-full':'icon-star'"></text>
						</view>
					</view>
					<view class="content">
						<text>
							{{item.content}}
						</text>
					</view>
					<view class="album-box">
						<view v-for="(pic,pindex) in item.evaluateAlbums" :key="pindex" class="img-box">
							<image mode="widthFix" :src="$api.loadFile(pic.thumbPath)"></image>
						</view>
					</view>
					<view class="remark">
						<text>{{item.orderGoods.skuText}}</text>
					</view>
				</view>
				<!--循环.结束-->
			</view>
		</view>
		<!--评价.结束-->
		
		<!--详情.开始-->
		<view class="group-box wrap">
			<view class="goods-detail">
				<view class="stitle">
					<text class="title">商品介绍</text>
				</view>
				<view class="content" v-html="model.goodsProduct.shopGoods.content">
				</view>
			</view>
		</view>
		<!--详情.结束-->
		
		<!--底部.开始-->
		<view class="goods-bar">
			<view class="foot-box">
				<view class="left">
					<navigator :url="'../merchant/index?id='+model.merchantId" class="icon iconfont icon-home-plain">店铺</navigator>
					<navigator open-type="switchTab" url="../cart/cart" class="icon iconfont icon-cart">购物车</navigator>
					<text v-if="isFavorite" class="active icon iconfont icon-star-full">已收藏</text>
					<text v-else class="icon iconfont icon-star" @click="addFavorite(model.goodsProduct.shopGoods.id)">收藏</text>
				</view>
				<view class="right">
					<text @click="addOrder(model.id)" class="btn red">立即兑换</text>
				</view>
			</view>
		</view>
		<!--底部.结束-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFavorite: false, //是否收藏
				evaluateList: [], //评价列表
				model: {
					goodsProduct:{
						shopGoods:{}
					}
				},
			}
		},
		methods: {
			//初始化数据
			async initData(id){
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				//加载兑换信息
				await _this.$api.request({
					url: `/client/shop/convert/${id}`,
					method: "GET"
				}).then(res=>{
					_this.model = res.data;
					//替换内容标签
					_this.model.content = _this.$api.replaceHtml(_this.model.content);
					//console.log(_this.model.content);
				}).catch(err=>{
					console.log(err);
				});
				//加载评价列表
				await _this.$api.request({
					url: `/client/goods/evaluate/view/${_this.model.goodsProduct.shopGoods.id}/1`,
					method: "GET",
				}).then(res=>{
					_this.evaluateList = res.data;
				});
				//加载商品收藏信息
				await _this.$api.request({
					url: `/account/member/favorite/goods/${_this.model.goodsProduct.shopGoods.id}`,
					method: "GET",
				}).then(res=>{
					_this.isFavorite = true;
				}).catch(err=>{
					//捕获异常，继续执行下一步
				});
				//关闭加载
				uni.hideLoading();
			},
			//添加商品收藏
			async addFavorite(goodsId){
				let _this = this;
				await _this.$api.request({
					url: `/account/member/favorite`,
					method: "post",
					data: {
						siteId: _this.$site,
						goodsId: goodsId
					}
				}).then(res=>{
					_this.isFavorite = true;
					uni.showToast({
						title: '收藏成功',
						icon: 'success',
						duration: 2000
					});
				});
			},
			//立即兑换
			addOrder(id){
				uni.navigateTo({
					url: `/pages/order/confirm?type=3&id=${id}`
				})
			}
		},
		//页面初始化
		onLoad(options){
			let id = parseInt(options.id);
			this.initData(id);
		}
	}
</script>

<style lang="scss">
	.goods-head{
		.swiper-box{
			width: 750rpx;
			height: 750rpx;
			background: #fff;
			.swiper-item{
				display: flex;
				align-items: center;
				image{
					width: 100%;
				}
			}
		}
	}
</style>
